<template>
  <div class="relative app-login">
    <div
      class="absolute top-0 left-0 w-full h-[60px] bg-white text-lg font-bold flex items-center px-10 gap-2"
    >
      <img src="../../assets/images/titleIcon.png" alt="" class="w-[30px] h-[30px]" />
      <span>数字化中心</span>
    </div>
    <div class="login-formBox">
      <el-form class="login-form" ref="loginFormRef" :model="loginForm" :rules="loginRules">
        <div class="form-name">
          <span>登录</span>
          <div class="mt-2 text-sm font-normal text-[#757687]">欢迎登录数字化中心</div>
        </div>

        <div class="mt-4">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              name="username"
              type="text"
              placeholder="请输入用户名"
              class="input-text"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              name="password"
              :type="pwdType"
              placeholder="请输入密码"
            >
            </el-input>
          </el-form-item>
        </div>
        <!-- <div class="remember">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <a href="#" class="forget">忘记密码</a>
        </div> -->
        <el-button color="#06c167" :loading="loading" @click="handleLogin"> 登录 </el-button>
      </el-form>
    </div>
    <footer class="app-login-footer">
      <!-- <span>© {{ Year }} 版权所有</span> -->
      <span>宁波数字孪生（东方理工）研究院</span>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { validatePassword } from './rule.js'
import { year } from '@/utils/time.js'
import { useUserStore } from '@/stores/modules/user.js'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores/modules/app.js'

const loginFormRef = ref(null)
const router = useRouter()
// const Year = ref(year)
const appStore = useAppStore()
const loginForm = ref({
  username: 'admin',
  password: '123456',
  checked: true
})
const loginRules = ref({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入用户名'
    }
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      validator: validatePassword()
    }
  ]
})
const pwdType = ref('password')
const loading = ref(false)
const { Login } = useUserStore()

// const toggleClick = () => {
//   pwdType.value === 'password' ? (pwdType.value = 'text') : (pwdType.value = 'password')
// }
const handleLogin = () => {
  loginFormRef.value.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    await Login(loginForm.value)
    loading.value = false
    // 若是主动退出即没有redirect就删除所有tagsView
    if (!router.currentRoute.value.query.redirect) {
      appStore.removeTagsView({ type: 'all' })
    }
    router.push(router.currentRoute.value.query.redirect || '/')
  })
}
</script>

<style lang="scss" scoped>
.app-login {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/login_bg.png');
  background-color: #eef2f6;
  // background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  .login-formBox {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    // .title {
    //   margin-bottom: 30px;
    //   font-size: 60px;
    //   font-weight: bold;
    //   color: #fff;

    //   &_single {
    //     margin: 0 6px;
    //     background-image: linear-gradient(-90deg, #6891ff 0%, #ffffff 98.6328125%);
    //     -webkit-background-clip: text;
    //     -webkit-text-fill-color: transparent;
    //   }
    // }

    .login-form {
      width: 450px;
      height: 550px;
      box-sizing: border-box;
      width: 428px;
      height: 420px;
      overflow: hidden;
      border-radius: 16px;
      padding: 48px 44px;
      background: #fff;
      box-shadow: 0px 4px 20px 0px rgba(152, 163, 176, 0.25);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;

      .form-name {
        font-size: 24px;
        font-weight: bold;
        color: #000;
        // text-align: center;
        // margin-left: 30px;
      }

      .remember {
        margin-left: 24px;
        display: flex;
        justify-content: space-between;

        :deep() {
          .el-checkbox__label {
            color: #b9bed1;
          }
        }

        .forget {
          margin-top: 9px;
          color: #b9bed1;
          font-size: 14px;
        }
      }

      .el-button {
        height: 40px;
        // margin-left: 30px;
        font-size: 14px;
        // font-weight: bold;
        color: #fefefe;
        // background: rgba(53, 119, 246, 0.89);
        border: none;

        // &:hover {
        //   background: #79bbff;
        // }
      }
    }
  }

  .app-login-footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0 40px;
    font-size: 14px;
    color: #757687;
  }
}
</style>
